import React from 'react';
import { connect } from 'dva';
import Container from '../components/Base/Container';
import { Tabs, WhiteSpace, SearchBar, WingBlank, Badge, Icon } from 'antd-mobile';
import styles from './KnowledgeBase.less';
import styles2 from '../components/Base/HistorySearch.less';
import {routerRedux} from 'dva/router';
import classnames from 'classnames';

const TabPane = Tabs.TabPane;

const innerHeight=window.innerHeight;

const data=[
  {
  name:'孕期',
  img:require('../assets/magazine1.png')
},
  {
    name:'0-1岁婴儿',
    img:require('../assets/magazine2.png')
  },
  {
    name:'1-3岁幼儿',
    img:require('../assets/magazine3.png')
  },
  {
    name:'3-5岁宝宝',
    img:require('../assets/magazine4.png')
  }
]


const data2=[
  {
  name:'奶粉',
  img:require('../assets/奶粉.png')
},
  {
    name:'纸尿裤',
    img:require('../assets/纸尿裤.png')
  },
  {
    name:'辅食',
    img:require('../assets/辅食.png')
  },
  {
    name:'喂养用品',
    img:require('../assets/喂养用品.png')
  },
  {
    name:'洗护用品',
    img:require('../assets/洗护用品.png')
  },
  {
    name:'车床',
    img:require('../assets/车床.png')
  },
  {
    name:'棉品',
    img:require('../assets/棉品.png')
  },
  {
    name:'玩具',
    img:require('../assets/玩具.png')
  },
  {
    name:'营养品',
    img:require('../assets/营养品.png')
  },
  {
    name:'孕妈用品',
    img:require('../assets/孕妈用品.png')
  },
  {
    name:'孕妈服饰',
    img:require('../assets/孕妈服饰.png')
  },
]


class KnowledgeBase extends React.Component{

  state={
    focus:false,
  }

  componentDidMount(){
    document.querySelector('.am-navbar').parentNode.parentNode.style.paddingBottom='0';
    document.querySelector('#root > div').style.height='auto';
  }

  componentWillUnmount(){
    document.querySelector('.am-navbar').parentNode.parentNode.style.paddingBottom='1.2rem';
    document.querySelector('#root > div').style.height='100%';
  }


/*  badge=(h1, age)=>{
    let {recommend}=this.props.knowledge;
    if(!age){
      for(let i of recommend){
        if(i.h1===h1){
          return true
        }
      }
    }
    else{
      let _recommend=recommend.filter(item=>item.h1===h1)
      for(let i of _recommend){
        if(i.age===age){
          return true
        }
      }
    }

  }*/

  toRender=()=>{

    let arr=this.props.knowledge.growthWeekly.filter(item=>item.h1===this.props.knowledge.active1);

    let obj={};

    arr.map(item=>{
      if(obj[item.h2]){
        obj[item.h2].push(item)
      }
      else{
        obj[item.h2]=[];
        obj[item.h2].push(item);
      }
    })

    let ele=[];
    for(let i of Object.keys(obj)){
      ele.push(
        <div className={styles.title} key={i}>
          {i}
        </div>
      )

      for(let item of obj[i]){
        ele.push(
            <div onClick={this.result.bind(this,item._id)} className={styles.contain} key={i+item.age} >{item.age}</div>
        )
      }
    }
    return ele;
  }

  toRender2=()=>{

    let arr=this.props.knowledge.shopWeekly.filter(item=>item.h1===this.props.knowledge.active2);

    let ele=[];


    arr.map((item, index)=>{
      ele.push(
        <div onClick={this.result2.bind(this, item._id)} className={styles.title2} key={index}>
          {item.h2}
        </div>
      )
    });

    return ele;
  }

  clickLeft=(name, active)=>{
      this.props.dispatch({type:'knowledge/change', payload:{[name]:active}});
  }

  result=(id)=>{
    this.props.dispatch(routerRedux.push({
      pathname: '/knowledgeInfo',
      query: {
        id,
      },
    }));
  }

  result2=(id)=>{
    this.props.dispatch(routerRedux.push({
      pathname: '/shopWeeklyInfo',
      query: {
        id,
      },
    }));
  }

  change=(value)=>{
    if(value.trim().length){
      this.props.dispatch({type:'knowledge/shopWeeklySearch', payload:{key:value.trim()}});
    }
  }

  submit=(value)=>{
    let {recommend}=this.props.knowledge;
    if(recommend.length){
      this.result2(recommend[0]._id);
    }
  }

  tabChange=(value)=>{
    this.props.dispatch({type:'knowledge/change', payload:{tabActiveKey:value}});
  }

  render(){
    let {recommend, tabActiveKey}=this.props.knowledge;

    return(
      <Container title="母婴知识">

          <Tabs className={styles.tabs} defaultActiveKey={String(tabActiveKey)} onChange={this.tabChange}>
            <TabPane tab="育儿周刊" key="1" >
              <div className={styles.contain} style={{height: innerHeight-45-43.5+'px'}} >
                <div className={styles.left}>
                  {
                    data.map(item=>{
                      return(
                          <div onClick={this.clickLeft.bind(this, 'active1' ,item.name)} style={this.props.knowledge.active1===item.name?{backgroundColor:'white', border:'none'}:{}} className={styles.contain2} key={item.name} >
                            <img className={styles.img} src={item.img} alt=""/>
                            <div className={styles.title}>{item.name}</div>
                          </div>
                      )
                    })
                  }

                  <div className={styles.flex}></div>

                </div>
                <div className={styles.right} >
                  {
                    this.toRender()
                  }
                </div>
              </div>
            </TabPane>
            <TabPane tab="商品库" key="2">
               <div className={styles.bgInput}>
                 <SearchBar placeholder="请输入要搜索的关键词"
                 onChange={this.change}
                 onSubmit={this.submit}
                 onFocus={()=>{this.setState({focus:true})}}
                 onBlur={()=>{setTimeout(()=>{this.setState({focus:false})},50)}}
                 />
               </div>

              {
                !this.state.focus &&
                <div className={styles.contain} style={{height: innerHeight-45-43.5-44+'px'}} >
                  <div className={styles.left}>
                    {
                      data2.map(item => {
                        return (
                          <div onClick={this.clickLeft.bind(this, 'active2', item.name)}
                               style={this.props.knowledge.active2 === item.name ? {
                                 backgroundColor: 'white',
                                 border: 'none'
                               } : {}} className={styles.contain2} key={item.name}>
                            <img className={styles.img} src={item.img} alt=""/>
                            <div className={styles.title}>{item.name}</div>
                          </div>
                        )
                      })
                    }

                    <div className={styles.flex}></div>

                  </div>
                  <div className={styles.right} >
                    <div className={styles.h1}>{this.props.knowledge.active2}</div>
                    {
                      this.toRender2()
                    }
                  </div>
                </div>
              }

              {
                this.state.focus&&
                <div className={styles.recommend}>
                  {
                    recommend&&recommend.map((item,index)=>{
                      return (
                        <div key={index} className={styles2.historyItem} onClick={this.result2.bind(this,item._id)}>
                          <Icon type={require('../svg/search.svg')} className={styles2.icon1} />
                          <div className={styles2.name}>
                            {item.h2}
                          </div>
                          <Icon type={require('../svg/leftTop.svg')} className={styles2.icon2} />
                        </div>
                      )
                    })
                  }
                </div>
              }


            </TabPane>
          </Tabs>

      </Container>

    )
  }
}

export default connect(({knowledge})=>({knowledge}))(KnowledgeBase);
